<!--添加修改角色信息-->
<template>
  <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="1200"
           :title="title ? '新增阶段' : '编辑阶段'"
           :maskClosable="false"
           :destroyOnClose="true">
    <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">

      <!--      <a-row>-->
      <!--        <a-col span="12">-->
      <!--          <a-button type="primary" size="default" @click="addCourseStage()">新增阶段</a-button>-->
      <!--        </a-col >-->
      <!--      </a-row>-->

      <a-table
          :columns="columns" :dataSource="courseStageList" :rowKey="record => record.index"
          style="height: 300px;overflow-y: auto"
          :pagination="false">
        <span slot="stage" slot-scope="text, record, index">
          <a-input-number disabled v-model="record.stage" :key="'stage'+index+record.rowIndex"
                          placeholder="阶段" @change="changeInput($event,'stage',index)" :min="0" :max="100"
                          :precision="0"/>
        </span>
        <span slot="weight" slot-scope="text, record, index">
          <a-input-number v-model="record.weight" :key="'weight'+index+record.rowIndex"
                          placeholder="权重" @change="changeInput($event,'weight',index)" :min="0" :max="100"
                          :precision="0"/>
        </span>
        <span slot="description" slot-scope="text, record, index">
          <a-input :key="'description'+index+record.rowIndex"
                   placeholder="请输入说明" ref="re" v-model="record.description"
                   @change="changeScoreInput($event,'description',index)"
          />
        </span>
        <span slot="operation" slot-scope="text, record, index" class="table-operation">
                        <a @click="removeCourseStage(index)">
                                          删除</a>
                </span>
      </a-table>
    </a-form>
    <div slot="footer">
      <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
      <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
    </div>
  </a-modal>
</template>

<script>
import verify from 'libs/verify'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import elColorPicker from 'el-color-picker'
import moment from "moment";
import acManage from "@/store/acManage";

export default {
  name: 'addEdit',
  components: {
    AFormItem,
    elColorPicker,
    verify
  },
  data() {
    return {
      verify,
      form: this.$form.createForm(this),
      showAddTable: false,
      input: false,
      scoreCalcWay: '1',
      name: '',
      classroomId: '',
      teacherId: '',
      duration: 45,
      allowStuCount: 0,
      stageCount: 1,
      weekStudyHour: 1,
      backgroundColor: '',
      rowIndex: 10,
      stage: 1,
      courseStageList: [],
      courseStageObj: {
        rowIndex: 0,
        courseId: '',
        stage: '',
        description: '',
        weight: '',
      },
      columns: [
        {title: '阶段', dataIndex: 'stage', key: 'stage', width: '20%', scopedSlots: {customRender: 'stage'}},
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description',
          width: '20%',
          scopedSlots: {customRender: 'description'}
        },
        {title: '权重（%）', dataIndex: 'weight', key: 'weight', width: '20%', scopedSlots: {customRender: 'weight'}},
        {title: '操作', key: 'operation', width: '10%', scopedSlots: {customRender: 'operation'}}
      ],
    }
  },
  computed: {
    labSelectList() {
      return this.$store.state.acManage.labSelectList
    },
    teacherSelectList() {
      return this.$store.state.courseManage.teacherSelectList
    },
    formStyle() {
      return this.$store.state.common.formStyle
    }
  },
  props: {

    title: {
      type: Boolean,
      required: true
    },
    objDTO: {
      type: Object,
      required: true
    }
  },
  watch: {},
  methods: {
    onScoreCalcWayChange(e) {
      this.scoreCalcWay = e.target.value
    },
    changeBackgroundColor(value) {
      this.backgroundColor = value
    },
    changeLabList(value) {
      let _this = this;
      let labSelectList = _this.labSelectList;
      for (let index in labSelectList) {
        if (labSelectList[index].value === value) {
          let labObj = labSelectList[index].record
          _this.allowStuCount = labObj.diskNum * 2
        }
      }
    },

    addCourseStage() {
      this.courseStageObj = {
        rowIndex: this.rowIndex,
        courseId: '',
        stage: this.stage,
        scoreScaleMax: '',
        scoreLevel: '',
      }
      this.stage = this.stage + 1
      this.rowIndex = this.rowIndex + 1
      this.courseStageList.push(this.courseStageObj)
    },

    handleCourseStage(stageCount) {
      for (let i = 0; i < stageCount; i++) {
        this.courseStageList.push({
          rowIndex: i,
          courseId: '',
          stage: i + 1,
          description: '',
          weight: '',
        })
      }
    },
    getDetail(id) {
      let _this = this;
      _this.$store.dispatch('getCourseInfoAct', {id: id}).then(response => {
        let courseInfo = {}
        if (response.code === 0) {
          courseInfo = response.data
          let courseStageList = courseInfo.courseStageList
          _this.stage = courseStageList ? (courseStageList.length + 1) : 1
          this.courseStageObj.stage = _this.stage
          _this.courseStageList = courseStageList ? courseStageList : []
          if (_this.courseStageList.length === 0) {
            _this.handleCourseStage(courseInfo.stageCount)
          }
        } else {
          _this.$message.error(response.message)
        }
      })
    },

    removeCourseStage(index) {
      let _this = this
      let stageObj = this.courseStageList[index];
      _this.$store.dispatch('deleteCourseStageAct', {id: stageObj.id}).then(response => {
        if (response.code === 0) {
          _this.$message.success(response.message)
          _this.getDetail(stageObj.courseId)
          this.$emit('init')
        } else {
          _this.$message.error(response.message)
        }
      })
    },
    changeInput(value, prop, index) {
      this.courseStageList[index][prop] = value
    },
    changeScoreInput(e, prop, index) {
      this.courseStageList[index][prop] = e.target.value
    },
    /**
     * Function    : saveApply
     * Description : 打开弹框
     * Input       : none
     * Return      : none
     */
    showModal() {
      this.showAddTable = true
      this.rowIndex = 0
      this.courseStageList = []
      this.courseStageObj = {
        rowIndex: 0,
        courseId: '',
        stage: this.stage,
        description: '',
        weight: '',
      }
    },
    /**
     * Function    : showEdit
     * Description : 编辑时显示
     * Input       : opt单个所有数据
     * Return      : none
     */
    showEdit(opt) {
      this.showAddTable = true
      this.id = opt.id
      this.rowIndex = 10
      this.courseStageList = []
      this.courseStageObj = {
        rowIndex: 0,
        courseId: '',
        stage: 1,
        description: '',
        weight: '',
      }
      this.getDetail(opt.id)
    },

    /**
     * Function    : saveApply
     * Description : 角色信息新增、编辑保存
     * Input       : name
     * Return      : none
     */
    saveApply() {
      let courseStageList = this.courseStageList
      let weightCount = 0
      for (let index in courseStageList){
        weightCount = weightCount+(courseStageList[index].weight === '' ?0:courseStageList[index].weight)
      }
      if (weightCount !== 100){
        this.$message.error("权重之和必须为100%")
        return;
      }
      let para = {}
      para.id = this.id
      para.courseStageList = this.courseStageList
      this.$store.dispatch('saveCourseStageAct', para).then(response => {
        if (response.code === 0) {
          this.showAddTable = false
          this.$emit('init')
          this.$message.success(response.message)
        } else {
          this.$message.error(response.message)
        }
      })
    },

    /**
     * Function    : cancelApply
     * Description : 取消弹出框
     * Input       : val
     * Return      : none
     */
    cancelApply() {
      this.showAddTable = false
      let _this = this
      this.backgroundColor = ''
      this.scoreCalcWay = '1'
      setTimeout(function () {
        _this.form.resetFields()
      }, 100)
    },
    initData() {
    }

  },

  created() {
    this.initData()
  }
}
</script>

<style>
.ant-table-thead {
  position: sticky;
  top: 0px;
  z-index: 1;
}
</style>
